<template>
	<view class="container" :class="'theme-'+theme">
	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" > 
				<image src="../../static/newh5/fanhui.png" 
				class="yticon" 
				style="width: 13px;height: 20px;color:black" 
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">版本记录</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view>
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="toBottom">
			<view class="list-cell b-b m-t" v-for="(list, index) in lists" :key="index" @click="toDetail(list,index)"
				hover-class="cell-hover" :hover-stay-time="50">
				<view class="">
					<text class="cell-tit font-list">{{ list.title }}</text>
					<text class="tag" v-if="!list.isChecked">new</text><br />
					<text class="cell-tit">{{ list.issueDate }}</text>
				</view>
				<view class="">
					<text class="cell-more yticon icon-you"></text>
				</view>
			</view>
			<uni-load-more style="background-color: #fff" :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import {
		mapMutations,
		mapState
	} from "vuex";
	import {
		showVersionHistory
	} from "../../api/set/set.js";
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				newMessage: true,
				loadingType: 'more',
				page: 1,
				limit: 12,
				lists: [],
				listsIndex: undefined
			};
		},
		onShow() {
			console.log(this.listsIndex)
			if(this.listsIndex) {
				this.lists[this.listsIndex].isChecked = true;
				this.lists = JSON.parse(JSON.stringify(this.lists))
			}
			this.loadData();
		},
		onLoad() {
		  this.loadData();
		},
		computed: {
			...mapState(["hasLogin"]),
		},
		methods: {
			returnIndex() {
				goback()
			},
			...mapMutations(["logout"]),
			// loadData() {
			//   const param = {
			//     page: 1,
			//     limit: 10,
			//     // status: navItem.status
			//   };
			//   showVersionHistory(param).then((res) => {
			//     if (res.code === 0) {
			//       console.log("后台信息", res.data.records);
			//     }
			//   });
			// },
			toBottom() {
				console.log('滑到底');
				this.loadData();
			},
			loadData() {
				if (this.loadingType === "loading") {
					return;
				}
				this.loadingType = "loading";
				let total = 0;
				let list = [];
				const param = {
					page: this.page,
					limit: this.limit,
					// pageType: 1,
				};
				showVersionHistory(param).then((res) => {
					if (res.code === 0) {
						list = res.data.records;
						list.forEach((item) => {
							this.lists.push(item);
						});
						total = parseInt(res.data.total);
						if (this.lists.length === total) {
							this.loadingType = "noMore";
						} else {
							this.loadingType = "more";
						}
						this.page++;

					} else {
						this.toast(res.message);
						this.loadingType = "more";
					}
				});
			},
			toast(msg) {
				uni.showToast({
					title: msg,
					duration: 1200,
					mask: false,
					icon: "none",
				});
			},
			navTo(url) {
				if (!this.hasLogin) {
					uni.showModal({
						title: "提示",
						content: "您还未登录，不能进行此操作",
						confirmText: "去登录",
						cancelText: "取消",
						success: (suc) => {
							if (suc.confirm) {
								uni.navigateTo({
									url: "/pages/public/login",
								});
							}
						},
					});
				} else {
					uni.navigateTo({
						url,
					});
				}
			},
			toDetail(item,index) {
				this.listsIndex = index;
				console.log("item", item.id);
				// data = JSON.stringify(data)
				uni.navigateTo({
					url: `/pages/set/versionRecordDetail?item = ${JSON.stringify(item.id)}`,
				});
			},
		},
	};
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
	}

	.container {
		height: 100%;
	}

	.font-list {
		font-weight: bold;
	}

	.list-scroll-content {
		position: relative;
		// height: 100%;
		height: 800px;
		display: flex;
		// padding-top: 16rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		flex-direction: column;
		flex-shrink: 0;
	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 50upx;
		position: relative;
		background: #fff;
		justify-content: space-between;

		&.log-out-btn {
			margin-top: 30upx;

			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		.tag {
			font-size: 24upx;
			width: fit-content;
			text-align: center;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 0upx 5upx;
			line-height: 1;
		}


		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			/* margin-top: 16upx; */
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-sm;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(0.84);
		}
	}
</style>
